<template>
  <div>
    <h1>APP 根节点</h1>
    <hr />
    <MyText info="text"></MyText>
    <div class="left">
      <!-- 渲染 left 组件 和 right 组件 -->
      <Left></Left>
    </div>
    <div class="right">
      <Right></Right>
      <MyCont :init="6"></MyCont>
    </div>
    <div v-if="obj.status">当前obj.status为真</div>
    <button @click="updateObj">更改obj的status</button>
  </div>
</template>

<script>
// 导入需要的组件
import Left from "@/components/left.vue";
import Right from "@/components/right.vue";
import MyText from "@/components/Text.vue";
export default {
  // 注册组件
  components: {
    Left,
    Right,
    MyText,
  },
  data() {
    return {
      obj: {
        name: '张三',
        age: 18,
        status: false
      }
    }
  },
  methods: {
    updateObj() {
      this.obj.status = true
      console.log(this.obj)
    }
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.left {
  width: 200px;
  float: left;
  height: 200px;
  // background-color: aqua;
}
.right {
  float: right;
  width: 200px;
  height: 200px;
  // background-color: green;
}
// /deep/h5{
//   color: green;
// }
</style>